<template>
  <el-container>
    <el-main>
      <div class="n-mv">
        <div class="title">
          <i class="icon"></i>
          <span class="nm">{{mvinfo.name}}</span>
          <!-- artistId -->
          <span class="artnm">{{mvinfo.artistName}}</span>
        </div>
        <div class="mv">
          <div
            class="player"
            @pointermove.prevent="moveDragging($event)"
            @pointerup.prevent="stopDragging"
          >
            <!-- 视频播放 -->
            <video
              ref="myVideo"
              :src="mvsrc"
              class="media"
              @click.self="pauseVideo"
              @timeupdate="handleTimeUpdate"
              @ended="handleEnd"
              preload="none"
              :poster="mvinfo.cover"
            ></video>
            <div
              class="paly"
              @click="playVideo"
            >
              <a href="javascript:;"></a>
              <!-- 封面  mvinfo.cover -->
              <span class="loading"></span>
            </div>
          </div>
          <!--  进度条 -->
          <div class="controls">
            <!-- 总时长：mvinfo.duration  ms -->
            <div class="foh">
              <div
                class="j-left"
                @click="togglePlaying"
              >
                <!-- 小播放暂停 -->
                <a
                  href="javascript:;"
                  class="play iconfont  icon-bofang_zanting "
                  v-show="isPaused"
                ></a>
                <a
                  href="javascript:;"
                  class="play iconfont  icon-bofangzanting"
                  v-show="!isPaused"
                ></a>
                <!-- 当前播放时长 -->
                <span class="time">{{videoProgress | dateFormat2}}</span>
              </div>
              <div class="j-progress">
                <div
                  class="progress"
                  @click="handleProgressClick($event)"
                >
                  <!--:style="{width: curWid}" -->
                  <div class="out1">
                    <div class="in">
                      <!-- 进度条上的小圆点 -->
                      <span
                        class="dot"
                        @pointerdown="startDragging($event)"
                      ></span>
                    </div>
                  </div>
                  <div class="out2"></div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="duration">{{mvinfo.duration | dateFormat2}}</div>
              <div class="volume">
                <a
                  href="#"
                  class="mute"
                ></a>
              </div>
              <div class="brs">
                <span>1080P</span>
              </div>
              <!-- 全屏按钮 -->
              <a
                href="javascript:;"
                class="full"
                @click="setFullscreen"
              ></a>
            </div>

          </div>
        </div>
        <div class="j-op">
          <!-- 收藏夹：mvinfo.subCount   分享：mvinfo.shareCount   赞：不知道 -->
        </div>
      </div>
      <div class="n-cmt">
        <!-- 评论数：mvinfo.commentCount -->
      </div>
    </el-main>
    <el-aside width="270px">
      <h3 class="u-hd3">MV简介</h3>
      <div class="m-mvintr">
        <p class="s-fc4">发布时间：{{mvinfo.publishTime}}</p>
        <p class="s-fc4">播放次数：{{mvinfo.playCount/10000}}万次</p>
        <p class="intr">{{mvinfo.desc}}</p>
      </div>
      <h3 class="u-hd3">相关推荐</h3>
      <ul class="n-mvlist">
        <li
          v-for="(item,index) in simiMV"
          :key="index"
        >
          <div class="left">
            <a href="javascript:;">
              <img v-lazy="item.cover">
              <i class="iconfont icon-shexiangtou4">{{item.playCount/10000}}万</i>
            </a>
          </div>
          <div class="right">
            <p class="tit">{{item.name}}</p>
            <p class="time">09:46</p>
            <p class="by">by<span
                v-for="(i,index2) in item.artists"
                :key="index2"
              >{{i.name}}/</span></p>
          </div>
        </li>
      </ul>
    </el-aside>
  </el-container>
</template>

<script>
import axios from 'axios'
function secToTimer (originalSec) {
  const min = Math.floor(originalSec / 60);
  const sec = Math.floor(originalSec % 60);
  const minStr = min < 10 ? `0${min}` : String(min);
  const secStr = sec < 10 ? `0${sec}` : String(sec);
  return `${minStr}:${secStr}`;
}
export default {
  data () {
    return {
      video: null,
      isPaused: true,
      curWid: 0,
      videoProgress: 0,
      mvinfo: [],
      mvid: 0,
      mvsrc: '',
      curt: 0,
      audioInterval: null,
      isDragging: false,
      draggingStartX: 0,
      dotOffsetX: 0,
      // 相关MV
      simiMV: []
    }
  },
  created () {
    this.getMVInfo()
  },
  mounted () {
    // 这里必须是mounted函数而不能是created函数，因为只有DOM元素已经全部加载完毕时我们才能访问到this.$refs.v
    this.video = this.$refs.myVideo;
  },
  methods: {
    async getMVInfo () {
      this.mvid = this.$route.query.id;
      console.log(this.mvid)
      // 获取信息
      let res = await axios.get('https://autumnfish.cn//mv/detail?mvid=' + this.mvid)
      // console.log(res)
      this.mvinfo = res.data.data
      // 获取播放地址
      let reser = await axios.get('https://autumnfish.cn//mv/url?id=' + this.mvid)
      // console.log(reser)
      this.mvsrc = reser.data.data.url
      // console.log(this.mvsrc)
      // 获取相关推荐
      let resth = await axios.get('https://autumnfish.cn//simi/mv?mvid=' + this.mvid)
      // console.log(resth)
      this.simiMV = resth.data.mvs
    },
    // 按住进度条小圆点触发
    startDragging (event) {
      console.log('按下鼠标')
      this.pauseVideo();
      this.isDragging = true;
      this.draggingStartX = event.clientX;
    },
    // 开始拖动小圆点
    moveDragging (event) {
      if (this.isDragging) {
        console.log('拖动小圆点.....')
        // 进度条当前实际的width
        const offsetX = event.clientX - this.draggingStartX;
        this.dotOffsetX = offsetX < 0 ? 0 : offsetX;
        // 根据最后的点设置播放点。
        this.setProgress(event.clientX);
      }
    },
    // 停止拖动小圆点
    stopDragging () {
      console.log('鼠标抬起，停止拖动')
      this.isDragging = false;
      this.dotOffsetX = 0;
    },
    // 点击进度条
    handleProgressClick (event) {
      const clickX = event.clientX;
      this.setProgress(clickX);
    },
    setProgress (x) {
      // x是相对于当前窗口的左距离
      // console.log(x)
      let progressPercent = (x - 255) / 380;
      if (progressPercent < 0) {
        progressPercent = 0;
      } else if (progressPercent > 1) {
        progressPercent = 1;
      }
      // 修改时间点 = 总时长 * 当前宽度比
      // console.log('duration', this.video.duration)
      //设置播放点
      this.video.currentTime = this.video.duration * progressPercent;
      // console.log(progressPercent)
    },
    // 全屏
    setFullscreen (element) {
      var el = element instanceof HTMLElement ? element : document.documentElement;
      var rfs = el.requestFullscreen || el.webkitRequestFullscreen
      if (rfs) {
        rfs.call(el);
      } else if (window.ActiveXObject) {
        var ws = new ActiveXObject("WScript.Shell");
        ws && ws.SendKeys("{F11}");
      }
    },
    // 退出全屏
    exitFullscreen () {
      var efs = document.exitFullscreen || document.webkitExitFullscreen
      if (efs) {
        efs.call(document);
      } else if (window.ActiveXObject) {
        var ws = new ActiveXObject("WScript.Shell");
        ws && ws.SendKeys("{F11}");
      }
    },
    //播放时间点更新时
    handleTimeUpdate () {
      // 当前时长：this.video.videoProgress毫秒
      // 总时长 this.video.duration
      this.videoProgress = Math.round(this.video.currentTime) * 1000;
      this.curWid = ((this.videoProgress / this.video.duration) / 1000) * 380;
      document.getElementsByClassName('out1')[0].style.width = this.curWid + 'px';
      // console.log('this.curWid', this.curWid)
    },
    // 点击小的暂停、继续
    togglePlaying () {
      if (this.isPaused) {
        this.playVideo();
      } else {
        this.pauseVideo();
      }
    },
    handleEnd () {
      this.pauseVideo();
    },
    playVideo () {
      console.log('播放')
      this.isPaused = false;
      let video = document.getElementsByClassName('media')[0]
      // 隐藏暂停按钮
      document.getElementsByClassName('paly')[0].style.opacity = 0
      // 播放
      this.video.play();
    },
    pauseVideo () {
      console.log('暂停')
      this.isPaused = true;
      // 显示暂停按钮
      document.getElementsByClassName('paly')[0].style.opacity = 1
      // 暂停
      this.video.pause();
    },



  }
}
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
li {
  list-style: none;
}
ul,
li,
p {
  margin: 0;
  padding: 0;
}
.el-container {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  .el-aside {
    padding: 20px 40px 40px 30px;
    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 12px;
    }
    .m-mvintr {
      margin-top: -4px;
      padding-bottom: 34px;
      .s-fc4 {
        color: #999;
        font-size: 12px;
      }
      .intr {
        margin-top: 10px;
        line-height: 18px;
        font-size: 12px;
        color: #666;
      }
    }
    .n-mvlist {
      margin-bottom: 20px;
      li {
        width: 200px;
        margin-bottom: 15px;
        display: flex;
        justify-content: left;
        align-items: center;
        .left {
          width: 96px;
          height: 54px;
          a {
            display: block;
            width: 96px;
            height: 54px;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .iconfont {
              position: absolute;
              font-size: 12px;
              // background-color: rgba(0, 0, 0, 0.5);
              right: 0;
              top: 0;
              color: #fff;
            }
          }
        }
        .right {
          margin-left: 5px;
          .tit {
            line-height: 21px;
            width: 95px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            font-size: 12px;
          }
          .time,
          .by {
            font-size: 12px;
            width: 95px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
      }
    }
  }
  .el-main {
    padding: 47px 30px 40px 39px !important;
    .n-mv {
      .title {
        padding-top: 10px;
        margin-bottom: 8px;
        .icon {
          display: inline-block;
          width: 29px;
          height: 18px;
          margin: 7px 5px auto auto;
          background-image: url(../../assets/image/icon2.png);
          background-position: -230px -480px;
        }
        .nm {
          max-width: 100%;
          margin-top: -10px;
          margin-right: 8px;
          font-size: 24px;
          line-height: 32px;
        }
        .artnm {
          margin: 4px 0 0 0;
          font-size: 12px;
          color: #0c73c2;
          cursor: pointer;
        }
      }
      .mv {
        width: 640px;
        height: 360px;
        background-color: #2e2e2e;
        font-size: 0;
        line-height: 0;
        position: relative;
        .player {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          position: relative;
          .media {
            display: block;
            width: 100%;
            height: 100%;
            background: #000;
          }
          .paly {
            opacity: 1;
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            a {
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              width: 74px;
              height: 74px;
              margin-left: -37px;
              margin-top: -37px;
              background-position: center center;
              background-repeat: no-repeat;
              background-image: url(../../assets/image/down.png);
            }
          }
          .loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 25px;
            height: 25px;
            margin-top: -12px;
            margin-left: -12px;
            background-image: url(../../assets/image/loading.png);
          }
        }
        .controls {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 42px;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: left;
          align-items: center;
          .right {
            margin-left: 10px;
            display: flex;
            justify-content: left;
            align-items: center;
            .duration {
              height: 34px;
              margin: 0;
              line-height: 34px;
              color: rgba(255, 255, 255, 0.5);
              font-size: 12px;
            }
            .volume {
              // position: relative;
              margin-left: 10px;
              margin-right: 1px;
              padding: 11px 10px;
              .mute {
                display: block;
                width: 16px;
                height: 12px;
                background: url(../../assets/image/volume.png) no-repeat center
                  center;
              }
            }
            .brs {
              width: 50px;
              height: 17px;
              z-index: 3;
              span {
                line-height: 17px;
                text-align: center;
                color: rgba(255, 255, 255, 0.5);
                cursor: default;
                font-size: 12px;
              }
            }
            .full {
              display: block;
              width: 34px;
              height: 34px;
              background: url(../../assets/image/full.png) no-repeat center;
            }
          }
          .foh {
            display: flex;
            justify-content: left;
            align-items: center;
            .j-left {
              display: flex;
              justify-content: left;
              align-items: center;
              .play {
                display: block;
                margin: 0 6px;
                font-size: 25px;
                color: #808080;
                // background: url(../../assets/image/playsmall.png) no-repeat
                // center;
              }
              .time {
                font-size: 12px;
                color: rgba(255, 255, 255, 0.5);
              }
            }
            .j-progress {
              height: 34px;
              padding: 15px 10px 0;
              overflow: hidden;
              width: 380px;
              position: relative;
              padding-right: 0;
              .progress {
                position: absolute;
                top: 22px;
                left: 10px;
                right: 10px;
                width: 100%;
                height: 4px;
                border-radius: 2px;
                background-color: rgba(255, 255, 255, 0.2);
                cursor: pointer;
                user-select: none;
                .out1 {
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 100%;
                  border-radius: 2px;
                  background-color: #b2072a;
                  z-index: 2;
                  width: 0%;
                  .in {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 100%;
                    .dot {
                      position: absolute;
                      top: -10px;
                      right: -12px;
                      display: block;
                      width: 24px;
                      height: 24px;
                      background: url(../../assets/image/point.png) no-repeat
                        center;
                    }
                  }
                }
                .out2 {
                  background-color: rgba(255, 255, 255, 0.3);
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 100%;
                  border-radius: 2px;
                  z-index: 1;
                  width: 60%;
                }
              }
            }
          }
        }
      }
      .j-op {
        margin: 12px 0 45px;
      }
    }
    .n-cmt {
      margin-top: 40px;
    }
  }
}
</style>
